<template>
  <div class="user-information flex-middle">
    <search-input />
    <el-dropdown>
      <el-badge :is-dot="false" :max="99">
        <nuxt-link :to="`/user/dabord/${userInfo.id}`" class="icon user-pic flex-center">
          <i v-if="!userInfo.portrait" class="iconfont icon-touxiang"></i>
          <img v-else :src="userInfo.portrait" alt="用户头像" />
        </nuxt-link>
      </el-badge>
      <el-dropdown-menu>
        <template v-if="userInfo.scope !== 'USER'">
          <el-dropdown-item @click.native="backstageMan">后台管理</el-dropdown-item>
        </template>
        <el-dropdown-item>消息通知</el-dropdown-item>
        <el-dropdown-item @click.native="toUserCenter">个人主页</el-dropdown-item>
        <el-dropdown-item @click.native="modifyInfors">修改资料</el-dropdown-item>
        <el-dropdown-item @click.native="editPassword">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="handleLogout">账号登出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <nuxt-link to="/word/release" class="theme-bg">写文章</nuxt-link>
  </div>
</template>

<script>
import Cookie from 'js-cookie';
import API from '~/interface/User';
import SearchInput from './SearchInput';
export default {
  components: {
    SearchInput
  },

  data() {
    return {
      userInfo: {},
      emailSendable: true
    }
  },

  created() {
    this.$utils.userType().then(data => {
      this.userInfo = data;
    });
  },

  methods: {
    // 管理后台
    backstageMan() {
      this.$router.push('/user/backstage');
    },
    // 个人主页
    toUserCenter() {
      this.$router.push(`/user/dabord/${this.userInfo.id}`);
    },
    // 修改资料
    modifyInfors() {
      this.$router.push(`/user/modify/${this.userInfo.id}`);
    },
    // 修改密码
    editPassword() {
      if (this.emailSendable) {
        this.emailSendable = false;
        API.postChangeCode().then(res => {
          this.$message('验证码已发送至邮箱, 请及时查收~');
          this.$router.push('/user/password');
        });
      }
    },
    // 账号登出
    handleLogout() {
      API.postLogout().then(res => {
        Cookie.remove('rabbit_token');
        Cookie.remove('rabbit_userID');
        this.$router.go(0);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.user-information {
  .iconfont {
    font-size: 25px;
    color: #666;
    border-radius: 50%;
  }

  /deep/ .el-badge__content.is-fixed.is-dot {
    width: 10px;
    height: 10px;
    right: 15px;
  }

  .theme-bg {
    display: inline-block;
    padding: 10px 20px;
    font-weight: bold;
  }

  .user-pic {
    width: 40px;
    height: 40px;
    font-size: 0;
    margin: 0 10px;
    overflow: hidden;

    .iconfont {
      font-size: 20px;
    }
  }
}
</style>